<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/task14-1.css">
    <link rel="stylesheet" href="../../css/g_components.css">
    <link rel="stylesheet" href="../../css/head.css">
    <link rel="stylesheet" href="../../css/bottom.css">
    <link rel="stylesheet" href="../../css/carousel.css">
    <link rel="stylesheet" href="../../css/grd.css">
    <link rel="stylesheet" href="../../css/media_inquiries.css">
    <link rel="stylesheet" href="../../css/responsive_nav_bar.css">
    <title>重构任务八首页</title>
</head>

<body>
    <header>
        <div class="container">
            <div class="box">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <p class="hotline font-16-d">客服热线：010-594-78634</p>
                        <div class="imgbox">
                            <img src="../../img/task8-1-1.png" alt="微信">
                            <img src="../../img/task8-1-2.png" alt="QQ">
                            <img src="../../img/task8-1-3.png" alt="微博">
                        </div>
                        <div class="login-box">
                            <span class="login"><a class="font-16-d" href="#">登录</a></span>&nbsp
                            <span class="login"><a class="font-16-d" href="#">注册</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <nav class="navbar">
            <div class="container">
                <div class="nav-logo"><img src="../../img/task8-1-20.png" alt="技能树"></div>
                <label class="label" for="f1">
                    <div></div>
                    <div></div>
                    <div></div>
                </label>
                <input type="checkbox" id="f1">
                <ul class="nav-box">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="task14-2.html">职业</a></li>
                    <li><a href="task14-3.html">推荐</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </div>
        </nav>
        <!-- 轮播图 -->
        <div class="carousel-box">
            <ul class="carousel">
                <input type="radio" id="carousel-1" name="carousel" checked>
                <input type="radio" id="carousel-2" name="carousel">
                <input type="radio" id="carousel-3" name="carousel">
                <input type="radio" id="carousel-4" name="carousel">
                <li class="carousel-bg"><img src="../../img/carousel-1.png" alt=""></li>
                <li class="carousel-bg"><img src="../../img/carousel-2.png" alt=""></li>
                <li class="carousel-bg"><img src="../../img/carousel-3.png" alt=""></li>
                <li class="carousel-bg"><img src="../../img/carousel-4.png" alt=""></li>
                <li class="carousel-bg"><img src="../../img/carousel-1.png" alt=""></li>
                <div class="label-box">
                    <label for="carousel-1"></label>
                    <label for="carousel-2"></label>
                    <label for="carousel-3"></label>
                    <label for="carousel-4"></label>
                </div>
            </ul>
        </div>
    </header>
    <main>
        <div class="placeholder"></div>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <span class="efficientlogo"><img src="../../img/task8-1-5.png" alt="高效"></span>
                    <h3 class="explain font-20-d">高效</h3>
                    <p class="word font-16">将五到七年的成长时间，缩短到一年到三年。</p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <span class="standardlogo"><img src="../../img/task8-1-6.png" alt="规范"></span>
                    <h3 class="explain font-20-d">规范</h3>
                    <p class="word font-16">标准的实战教程，不会走弯路</p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <span class="contactslogo"><img src="../../img/task8-1-7.png" alt="人脉"></span>
                    <h3 class="explain font-20-d">人脉</h3>
                    <p class="word font-16">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="numberbox">
                        <span class="number font-14"><img class="numberlogo" src="../../img/task8-1-8.png"
                                alt="">&nbsp12400</span>
                        <p class="word font-16">累计在线学习人数</p>
                        <span class="number font-14"><img class="numberlogo" src="../../img/task8-1-8.png"
                                alt="">&nbsp12400</span>
                        <p class="word font-16">学员已经找到满意工作</p>
                    </div>
                </div>
            </div>
            <div class="placeholder"></div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h4 class="study font-20-d">如何学习</h4>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="containerbox">
                        <span class="circularbox">1</span>
                        <div class="stepbox">
                            <p class="step font-12-d">匹配你现在的个人情况寻找合适自己的岗位</p>
                        </div>
                        <span class="arrowlogo"><img src="../../img/task8-1-9.png" width="24px" height="22px" alt="箭头">
                        </span>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="containerbox">
                        <span class="circularbox">2</span>
                        <div class="stepbox">
                            <p class="step font-12-d">了解职业前景薪金待遇，竞争压力等</p>
                        </div>
                        <div class="stepbox"><span class="arrowlogo"><img src="../../img/task8-1-9.png" width="24px"
                                                                          height="22px" alt="箭头"></div>
                        </span>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="containerbox">
                        <span class="circularbox">3</span>
                        <div class="stepbox">
                            <p class="step font-12-d">掌握行业内顶级技能</p>
                        </div>
                        <span class="arrowlogo"><img src="../../img/task8-1-9.png" width="24px" height="22px" alt="箭头">
                        </span>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="containerbox">
                        <span class="circularbox">4</span>
                        <div class="stepbox">
                            <p class="step font-12-d">查看职业目标任务</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="containerbox">
                        <span class="circularbox">5</span>
                        <div class="stepbox">
                            <p class="step font-12-d">参考学习资源，掌握技能点，逐个完成任务</p>
                        </div>
                        <span class="arrowlogo"><img src="../../img/task8-1-9.png" width="24px" height="22px" alt="箭头">
                        </span>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="containerbox">
                        <span class="circularbox">6</span>
                        <div class="stepbox">
                            <p class="step font-12-d">加入班级，和小伙伴们互帮互助，一块学习</p>
                        </div>
                        <span class="arrowlogo"><img src="../../img/task8-1-9.png" width="24px" height="22px" alt="箭头">
                        </span>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="containerbox">
                        <span class="circularbox">7</span>
                        <div class="stepbox">
                            <p class="step font-12-d">匹配你现在的个人情况寻找合适自己的岗位</p>
                        </div>
                        <span class="arrowlogo"><img src="../../img/task8-1-9.png" width="24px" height="22px" alt="箭头">
                        </span>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="containerbox">
                        <span class="circularbox">8</span>
                        <div class="stepbox">
                            <p class="step font-12-d">完成职业技能，升级业界大牛</p>
                        </div>
                    </div>
                </div>
                <div class="placeholder"></div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h4 class="study font-20-d">优秀学员展示</h4>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="studentbox">
                        <span class="photo"><img class="tutor" src="../../img/task8-1-10.png">
                        </span>
                        <h4 class="name font-20-d">技术顾问：罗大佑</h4>
                        <p class="introduce font-16-d">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="studentbox">
                        <span class="photo"><img class="tutor" src="../../img/task8-1-11.png">
                        </span>
                        <h4 class="name font-20-d">技术顾问：罗大佑</h4>
                        <p class="introduce font-16-d">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="studentbox">
                        <span class="photo"><img class="tutor" src="../../img/task8-1-12.png">
                        </span>
                        <h4 class="name font-20-d">技术顾问：罗大佑</h4>
                        <p class="introduce font-16-d">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="studentbox">
                        <span class="photo"><img class="tutor" src="../../img/task8-1-13.png">
                        </span>
                        <h4 class="name font-20-d">技术顾问：罗大佑</h4>
                        <p class="introduce font-16-d">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="botbox">
                        <input type="radio" id="i1" name="bot" checked></input>
                        <input type="radio" id="i2" name="bot"></input>
                        <input type="radio" id="i3" name="bot"></input>
                        <input type="radio" id="i4" name="bot"></input>
                        <label for="i1"></label>
                        <label for="i2"></label>
                        <label for="i3"></label>
                        <label for="i4"></label>
                        <div class="placeholder"></div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h4 class="study font-20-d">战略合作企业</h4>
                </div>
            </div>
            <div class="bg-white">
                <div class="row-1-10">
                    <div class="col-xs-10-10 col-sm-10-10 col-md-2-10 col-lg-2-10">
                        <img class="enterpriselogo" src="../../img/task8-1-14.png" alt="阿里巴巴">
                    </div>
                    <div class="col-xs-10-10 col-sm-10-10 col-md-2-10 col-lg-2-10">
                        <img class="enterpriselogo" src="../../img/task8-1-15.png" alt="金山云">
                    </div>
                    <div class="col-xs-10-10 col-sm-10-10 col-md-2-10 col-lg-2-10">
                        <img class="enterpriselogo" src="../../img/task8-1-16.png" alt="环信">
                    </div>
                    <div class="col-xs-10-10 col-sm-10-10 col-md-2-10 col-lg-2-10">
                        <img class="enterpriselogo" src="../../img/task8-1-17.png" alt="容联">
                    </div>
                    <div class="col-xs-10-10 col-sm-10-10 col-md-2-10 col-lg-2-10 ">
                        <img class="enterpriselogo" src="../../img/task8-1-18.png" alt="七牛">
                    </div>
                </div>
            </div>
            <div class="placeholder"></div>
            <div class="bg-white">
                <h4 class="study font-20-d">友情链接</h4>
                <div class="row-1-30">
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3-30 col-md-3-30 col-sm-6-30 col-xs-10-30">
                        <div class="link-area">
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                            <div class="link-set">
                                <a class="font-16 link-a" href="#">
                                    <div class="spot"></div>手机软件
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="expandbox">
            <div class="container">
              <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                  <h4 class="white-h font-20-d">技能树 —— 改变你我</h4>
                  <div class="link-left">
                    <div class="sequence"><a class="bottomlink font-14-d" href="#">关于我们</a></div>|
                    <div class="sequence"><a class="bottomlink font-14-d" href="#">联系我们</a></div>|
                    <div class="sequence"><a class="bottomlink font-14-d" href="#">合作企业</a></div>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                  <h4 class="white-h font-20-d">旗下网站</h4>
                  <div class="link-in">
                    <div class="sequence"><a class="bottomlink font-14-d" href="#">草船云孵化器</a></div>
                    <div class="sequence"><a class="bottomlink font-14-d" href="#">最强IT特训营</a></div>
                  </div>
                  <div class="link-in">
                    <div class="sequence"><a class="bottomlink font-14-d" href="#">葡萄藤轻游戏</a></div>
                    <div class="sequence"><a class="bottomlink font-14-d" href="#">桌游精灵</a></div>
                  </div>
      
                </div>
                <div class="whitebox col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <h4 class="white-h font-20-d">微信公众平台</h4>
                    <img src="../../img/task8-1-19.png" alt="二维码">
                </div>
              </div>
            </div>
            <div class="footerbox">
              <div class="container">
                <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <p class="copyright font-14-d">Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
    </footer>
</body>

</html>